<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
    <script type="module" src="jumps.js"></script>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">

        <h2>图像</h2>

        <!---->
        <p>
            <pre>显示专辑封面、文件或URL中的图像。
        
如果未设置自定义路径，将显示专辑封面；
如果不存在专辑封面，将显示生成的艺术图（即艺术家和标题名称与彩色背景）。

支持动画GIF，并支持使用颜色键扣图。</pre>
        </p>
        <h4>属性</h4>
        <hr>
        <dl>
            <dt>通用元素属性</dt>
            <dd>
                <p>参见<a href="local://customization_general">通用属性</a>。</p>
            </dd>

            <hr>

            <dt id="customimage">自定义图像</dt>
            <dd>
                <p>要显示的图像。</p>
            </dd>
            <dt id="measureanimationspeed">动画速度</dt>
            <dd>
                <p>用于GIF图像的动画速度。</p>
            </dd>
            <dt id="keepaspectratioandcroptofit">保持纵横比并裁剪以适应</dt>
            <dd>
                <p>如果设置，不会拉伸图像，会裁剪以填充所需的尺寸。此属性会覆盖<property query="keepaspectratio">保持纵横比</property>。</p>
            </dd>
            <dt id="keepaspectratio">保持纵横比</dt>
            <dd>
                <p>如果设置，不会拉伸图像，会适应所需的尺寸。</p>
            </dd>
            <dt id="blurredborder">以模糊背景填充剩余部分</dt>
            <dd>
                <p>如果图像无法适应所需的尺寸，会用模糊图像填充空白区域。</p>
            </dd>
            <dt id="shape">形状</dt>
            <dd>
                <p>指定以其他形状而不是矩形显示图像。</p>
            </dd>
            <div class="tip">
                注： 蒙版和遮罩是一个东西哦
            </div>
            <dt id="maskimage">蒙版图像</dt>
            <dd>
                <p>用于遮罩<property query="customimage">自定义图像</property>区域的图像或合成。</p>
            </dd>
            <dt id="maskmode">蒙版模式</dt>
            <dd>
                <p>如果使用了<property query="maskimage">蒙版图像</property>，指定要解释为遮罩的颜色分量。</p>
            </dd>

            <hr>

            <dt id="color">颜色</dt>
            <dd>
                <p>图像的颜色。</p>
            </dd>
            <dt id="colorto">结束颜色</dt>
            <dd>

                <p>不使用<property query="measurecolorblend">颜色混合动画</property>就没用</p>
            </dd>
            <dt id="measurecolorblend">颜色混合动画</dt>
            <dd>
                <p>用于在<property query="color">颜色</property>和<property query="colorto">结束颜色</property>之间创建过度动画。</p>
            </dd>

            <hr>

            <dt id="colorkeyenabled">启用颜色键</dt>
            <dd>
                <p>如果图像没有透明度/Alpha通道，可以启用此选项以抠图。</p>
            </dd>
            <dt id="autodetectcolorkey">自动检测颜色键</dt>
            <dd>
                <p>如果设置，将尝试通过查看图像外围颜色来确定需要滤除的颜色。</p>
            </dd>
            <dt id="colorkey">颜色键</dt>
            <dd>
                <p>手动设置用于抠图的颜色。</p>
            </dd>
            <dt id="transparencystrength">透明度增强</dt>
            <dd>
                <p>增强图像的透明部分。</p>
            </dd>
            <dt id="opacitystrength">不透明度增强</dt>
            <dd>
                <p>增强图像的不透明部分。</p>
            </dd>

            <hr>

            <dt id="blurenabled">启用模糊</dt>
            <dd>
                <p>如果设置，将对整个图像进行模糊处理。</p>
            </dd>
            <dt id="blurdivider">模糊半径抑制</dt>
            <dd>
                <p>用于增加<property query="blurradius">模糊半径</property>的值。</p>
                <div class="tip"><pre>他的原理是这样的：
    假设模糊半径是 20
    模糊半径抑制是 3
    最后的模糊半径 = 模糊半径 / 模糊半径抑制
    既 20 / 3 = 6.66
所以值越小模糊半径越大</pre></div>
            </dd>
            <dt id="blurradius">模糊半径</dt>
            <dd>
                <p>模糊的程度。</p>
            </dd>

            <hr>
            <dt id="generatedalbumarthintshifthue">生成带色调偏移的专辑封面</dt>
            <dd>
                <p>为默认图像进行色调偏移。（在未设置<property query="customimage">自定义图像</property>时使用）</p>
            </dd>
            <dt id="generatedalbumarthintnotext">生成无文字的专辑封面</dt>
            <dd>
                <p>在默认图像上隐藏文字。（在未设置<property query="customimage">自定义图像</property>时使用）</p>
            </dd>
            <dt id="generatedalbumarthintforcegen">强制生成专辑封面</dt>
            <dd>
                <p>如果设置，强制显示默认图像。</p>
            </dd>
            <dt id="generatedalbumartcolor">专辑封面主题色</dt>
            <dd>
                <p>用于默认图像的颜色。（在未设置<property query="customimage">自定义图像</property>时使用）</p>
            </dd>
        </dl>
        <!---->
    </div>


    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
</html>